<template>
	<div class="parts-manager-info">
		<div class="main_content">
			<div class="main_content_title">
				<div class="left">
					<span>{{ propUpType === 'add' ? $t('publicBtn.add') : propUpType === 'edit' ? $t('publicBtn.edit') :
						$t('publicBtn.detail') }}</span>
					<template v-for="(item, index) in $route.meta.title">
						<span v-if="languageId === item.langId">{{ item.name }}</span>
					</template>
				</div>
				<div class="right" />
			</div>
			<div class="main_content_con">
				<!-- 语言动态标签页面 -->
				<el-row :gutter="24">
					<el-col :span="20">
						<elTabPane :isShow="isTag" :tagId="tagId" @tagClick="tagClick"></elTabPane>
					</el-col>
				</el-row>
				<el-form ref="info" :model="info" :rules="rules" class="demo-ruleForm">
					<el-form v-for="(info, index) in info.list" :ref="`info${index}`" :model="info" :rules="rules"
						v-show="tagId === info.langId" :key="index" label-width="110px" class="demo-ruleForm">
						<div class="content_info">
							<template v-if="propUpType !== 'detail'">
								<el-row :gutter="24">
									<el-col :span="10">
										<el-form-item :label="$t('text.numberLabel')" prop="code">
											<el-input v-model="info.code" :placeholder="$t('placeholderTip.enter')"
												@change="copyValue('list', 'code', info.code)" />
										</el-form-item>
									</el-col>
									<el-col :span="10">
										<el-form-item :label="$t('publicFormLabel.name')" prop="name">
											<el-input v-model="info.name" :placeholder="$t('placeholderTip.enter')" />
										</el-form-item>
									</el-col>
								</el-row>
								<el-row :gutter="24">
									<el-col :span="10">
										<el-form-item :label="$t('formLabel.anotherName')" prop="alias">
											<el-input v-model="info.alias" :placeholder="$t('placeholderTip.enter')" />
										</el-form-item>
									</el-col>
									<el-col :span="10">
										<el-form-item :label="$t('formLabel.classifyLabel')" prop="classifyId">
											<el-select v-model="info.classifyId" filterable clearable
												@change="copyValue('list', 'classifyId', info.classifyId)"
												:placeholder="$t('placeholderTip.pSelect')" style="width:100%;">
												<el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id" />
											</el-select>
										</el-form-item>
									</el-col>
								</el-row>
								<el-row :gutter="24">
									<el-col :span="10">
										<el-form-item :label="$t('publicFormLabel.brandName')" prop="brandIds">
											<el-select v-model="info.brandIds" multiple filterable clearable
												@change="copyValue('list', 'brandIds', info.brandIds)" :placeholder="$t('placeholderTip.pSelect')"
												style="width:100%;">
												<el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id" />
											</el-select>
										</el-form-item>
									</el-col>
									<el-col :span="10">
										<el-form-item :label="$t('formLabel.specification')">
											<el-input v-model="info.specs" :placeholder="$t('placeholderTip.enter')" />
										</el-form-item>
									</el-col>
								</el-row>
								<el-row :gutter="24">
									<el-col :span="10">
										<el-form-item :label="$t('formLabel.suggestedRetailPrice')">
											<el-input v-model="info.suggestPrice" :placeholder="$t('placeholderTip.enter')"
												@change="copyValue('list', 'suggestPrice', info.suggestPrice)" />
										</el-form-item>
									</el-col>
									<el-col :span="10">
										<el-form-item :label="$t('formLabel.retailPrice')" prop="">
											<el-input v-model="info.retailPrice" :placeholder="$t('placeholderTip.enter')"
												@change="copyValue('list', 'retailPrice', info.retailPrice)" />
										</el-form-item>
									</el-col>
								</el-row>
								<el-row :gutter="24">
									<el-col :span="10">
										<el-form-item :label="$t('formLabel.claiMprice')">
											<el-input v-model="info.claimPrice" :placeholder="$t('placeholderTip.enter')"
												@change="copyValue('list', 'claimPrice', info.claimPrice)" />
										</el-form-item>
									</el-col>
									<el-col :span="10">
										<el-form-item :label="$t('formLabel.insurancePrice')" prop="">
											<el-input v-model="info.insurePrice" :placeholder="$t('placeholderTip.enter')"
												@change="copyValue('list', 'insurePrice', info.insurePrice)" />
										</el-form-item>
									</el-col>
								</el-row>
								<el-row :gutter="24">
									<el-col :span="10">
										<el-form-item :label="$t('formLabel.wholesalePrice')">
											<el-input v-model="info.wholesalePrice" :placeholder="$t('placeholderTip.enter')"
												@change="copyValue('list', 'wholesalePrice', info.wholesalePrice)" />
										</el-form-item>
									</el-col>
									<el-col :span="10">
										<el-form-item :label="$t('formLabel.replacementPeriod')">
											<el-input v-model="info.changeDays" :placeholder="$t('placeholderTip.enter')"
												@change="copyValue('list', 'changeDays', info.changeDays)" />
										</el-form-item>
									</el-col>
								</el-row>
								<el-row :gutter="24">
									<el-col :span="24" style="display: flex;justify-content: flex-start;">
										<el-form-item :label="$t('formLabel.packingSmallUnit')" prop="smallId">
											<el-select v-model="info.smallId" filterable clearable
												@change="copyValue('list', 'smallId', info.smallId)" :placeholder="$t('placeholderTip.pSelect')">
												<el-option v-for="item in unitList" :key="item.id" :label="item.name" :value="item.id" />
											</el-select>
										</el-form-item>
										<div style="margin-top:9px;margin-left:20px;color:red">x</div>
										<el-form-item :label="$t('formLabel.packingQuantity')" label-width="90px" prop="unitNum">
											<el-input v-model="info.unitNum" :placeholder="$t('placeholderTip.enter')"
												@change="copyValue('list', 'unitNum', info.unitNum)" />
										</el-form-item>
										<div style="margin-top:9px;margin-left:20px;color:red">=</div>
										<el-form-item :label="$t('formLabel.packingLargeUnit')">
											<el-select v-model="info.largeId" filterable clearable
												@change="copyValue('list', 'largeId', info.largeId)" :placeholder="$t('placeholderTip.pSelect')">
												<el-option v-for="item in unitList" :key="item.id" :label="item.name" :value="item.id" />
											</el-select>
										</el-form-item>
									</el-col>
								</el-row>
								<el-row :gutter="24">
									<el-col :span="10">
										<el-form-item :label="$t('publicFormLabel.remark')">
											<el-input v-model="info.remark" @change="copyValue('list', 'remark', info.remark)" type="textarea"
												:placeholder="$t('placeholderTip.enter')" />
										</el-form-item>
									</el-col>
								</el-row>
							</template>
							<template v-else>
								<el-row :gutter="24">
									<el-col :span="10">
										<el-form-item :label="$t('text.numberLabel')" prop="code">
											<el-input readonly v-model="info.code" />
										</el-form-item>
									</el-col>
									<el-col :span="10">
										<el-form-item :label="$t('publicFormLabel.name')" prop="name">
											<el-input readonly v-model="info.name" />
										</el-form-item>
									</el-col>
								</el-row>
								<el-row :gutter="24">
									<el-col :span="10">
										<el-form-item :label="$t('formLabel.anotherName')" prop="alias">
											<el-input readonly v-model="info.alias" />
										</el-form-item>
									</el-col>
									<el-col :span="10">
										<el-form-item :label="$t('formLabel.classifyLabel')" prop="classifyId">
											<el-input readonly v-model="info.classifyName" />
										</el-form-item>
									</el-col>
								</el-row>
								<el-row :gutter="24">
									<el-col :span="10">
										<el-form-item :label="$t('publicFormLabel.brandName')" prop="brandIds">
											<el-input readonly v-model="info.brandNames" />
										</el-form-item>
									</el-col>
									<el-col :span="10">
										<el-form-item :label="$t('formLabel.specification')">
											<el-input readonly v-model="info.specs" />
										</el-form-item>
									</el-col>
								</el-row>
								<el-row :gutter="24">
									<el-col :span="10">
										<el-form-item :label="$t('formLabel.suggestedRetailPrice')">
											<el-input readonly v-model="info.suggestPrice" />
										</el-form-item>
									</el-col>
									<el-col :span="10">
										<el-form-item :label="$t('formLabel.retailPrice')" prop="">
											<el-input readonly v-model="info.retailPrice" />
										</el-form-item>
									</el-col>
								</el-row>
								<el-row :gutter="24">
									<el-col :span="10">
										<el-form-item :label="$t('formLabel.claiMprice')">
											<el-input readonly v-model="info.claimPrice" />
										</el-form-item>
									</el-col>
									<el-col :span="10">
										<el-form-item :label="$t('formLabel.insurancePrice')" prop="">
											<el-input readonly v-model="info.insurePrice" />
										</el-form-item>
									</el-col>
								</el-row>
								<el-row :gutter="24">
									<el-col :span="10">
										<el-form-item :label="$t('formLabel.wholesalePrice')">
											<el-input readonly v-model="info.wholesalePrice" />
										</el-form-item>
									</el-col>
									<el-col :span="10">
										<el-form-item :label="$t('formLabel.replacementPeriod')">
											<el-input readonly v-model="info.changeDays" />
										</el-form-item>
									</el-col>
								</el-row>
								<el-row :gutter="24">
									<el-col :span="24" style="display: flex;justify-content: flex-start;">
										<el-form-item :label="$t('formLabel.packingSmallUnit')" prop="smallId">
											<el-input readonly v-model="info.smallName" />
										</el-form-item>
										<div style="margin-top:9px;margin-left:20px;color:red">x</div>
										<el-form-item :label="$t('formLabel.packingQuantity')" label-width="90px" prop="unitNum">
											<el-input readonly v-model="info.unitNum" />
										</el-form-item>
										<div style="margin-top:9px;margin-left:20px;color:red">=</div>
										<el-form-item :label="$t('formLabel.packingLargeUnit')">
											<el-input readonly v-model="info.largeName" />
										</el-form-item>
									</el-col>
								</el-row>
								<el-row :gutter="24">
									<el-col :span="10">
										<el-form-item :label="$t('publicFormLabel.remark')">
											<el-input readonly v-model="info.remark" />
										</el-form-item>
									</el-col>
								</el-row>
								<div class="line"></div>
								<!--  -->
								<div class="updateList">
									<div class="title">{{ $t('text.historyList') }}</div>
									<el-table :data="updateList" border style="width: 80%;margin-top:22px">
										<el-table-column prop="updateTime" :label="$t('text.modificationTime')" align="center" />
										<el-table-column prop="retailPrice" :label="$t('formLabel.retailPrice')" align="center" />
										<el-table-column prop="claimPrice" :label="$t('formLabel.claiMprice')" align="center" />
										<el-table-column prop="insurePrice" :label="$t('formLabel.insurancePrice')" align="center" />
										<el-table-column prop="wholesalePrice" :label="$t('formLabel.wholesalePrice')" align="center" />
									</el-table>
								</div>
							</template>
						</div>
					</el-form>
				</el-form>
				<div class="footerBtn">
					<el-button @click="getCancle">{{ propUpType !== 'detail' ? $t('el.popconfirm.cancelButtonText') :
						$t('el.popconfirm.close') }}</el-button>
					<el-button v-if="propUpType !== 'detail'" type="primary" @click="addSubmitForm"
						v-loading.fullscreen.lock="fullscreenLoading">{{ $t('el.popconfirm.confirmButtonText') }}</el-button>
				</div>
			</div>
		</div>
	</div>
</template>
<script>

import {
	getAssMaterialInfo,
	setAssMaterialSave,
	setAssMaterialUpdate,
	getAssMaterialClassifySelectList,
	getUnitSelectList
} from '@/api/parts-manager'
import {
	getBrandSelectList,
} from '@/api/commercial-vehicle-manager'
import elTabPane from '@/components/el-tab-pane/index'; //语言动态标签页面
import defaultSettings from '@/settings'
export default {
	name: '',
	components: {
		elTabPane,
	},
	data() {
		return {
			tagId: '',//语言id 默认id 
			isTag: false,
			BASE_IMG: defaultSettings.BASE_IMG,
			limit: 5,
			info: {
				list: []
			},
			brandList: [],//品牌
			typeList: [],//分类
			unitList: [],//单位
			updateList: [],//历史记录
			rules: {
				code: [
					{
						required: true,
						message: this.$t('placeholderTip.enter'),
						trigger: 'blur'
					},
				],

				name: [
					{
						required: true,
						message: this.$t('placeholderTip.enter'),
						trigger: 'blur'
					}
				],
				alias: [
					{
						required: true,
						message: this.$t('placeholderTip.enter'),
						trigger: 'blur'
					}
				],
				classifyId: [
					{
						required: true,
						message: this.$t('placeholderTip.pSelect'),
						trigger: 'change'
					}
				],
				smallId: [
					{
						required: true,
						message: this.$t('placeholderTip.pSelect'),
						trigger: 'change'
					}
				],
				largeId: [
					{
						required: true,
						message: this.$t('placeholderTip.pSelect'),
						trigger: 'change'
					}
				],
				unitNum: [
					{
						required: true,
						message: this.$t('placeholderTip.enter'),
						trigger: 'blur'
					}
				],
			},
			propUpType: '', // 'add' edit detail
			fullscreenLoading: false,
		}
	},
	computed: {
		languageId() {
			// 固定语种ID  1:中文  2:英文 3:俄文 4:乌语
			return this.$store.getters.languageId
		},
		languageList() {
			return this.$store.getters.languageList.length > 0 ? this.$store.getters.languageList : JSON.parse(localStorage.getItem('languageList'))
		}
	},
	watch: {
		hierarchyList: {
			handler(newVal) {
				if (newVal.length === 0) {
					++this.isResouceShow
				}
			}
		},
	},
	mounted() {
		this.resetForm('info', 1) //重置表单
		window._vm = this
		this.propUpType = this.$route.query.propUpType
		this.isTag = true;
		this.tagId = this.languageId;
		if (this.$route.query.propUpType === 'add') {
			this.addData()
			this.getBrandData()
			this.getTypeList()
			this.getUnitist()
		} else if (this.$route.query.id) {
			if (this.$route.query.propUpType === 'edit') {
				this.getBrandData()
				this.getTypeList()
				this.getUnitist()
			}
			this.getInfo(this.$route.query.id)
		}
	},
	created() {
		console.log('created')
	},
	activated() {

	},

	destroyed() {
	},
	methods: {
		// 分类
		getTypeList() {
			getAssMaterialClassifySelectList()
				.then(res => {
					if (res.code === 200) {
						this.typeList = res.data || []
					}
				})
				.catch(err => {
					console.log(err, 'err')
				})
		},
		// 单位
		getUnitist() {
			getUnitSelectList()
				.then(res => {
					if (res.code === 200) {
						this.unitList = res.data || []
					}
				})
				.catch(err => {
					console.log(err, 'err')
				})
		},
		//品牌
		getBrandData() {
			getBrandSelectList()
				.then(res => {
					if (res.code === 200) {
						this.brandList = res.data || []
					}
				})
				.catch(err => {
					console.log(err, 'err')
				})
		},

		// 语言菜单处理
		tagClick(id) {
			if (id !== this.tagId) {
				this.resetForm('info', 2)
				this.tagId = id
			}
		},
		addData() {
			var arr = []
			this.languageList.map(i => {
				var obj = {
					langId: i.id,
					code: '', // 编号
					name: '', // 名称-多语言
					alias: '',// 别名-多语言
					classifyId: '', //分类
					brandIds: [],//品牌
					specs: '',//规格-多语言
					suggestPrice: '',//建议零售价
					retailPrice: '',//零售价
					claimPrice: '',//索赔价
					insurePrice: '',//保险价
					wholesalePrice: '',//批发价
					changeDays: '', //建议更换周期
					smallId: '',//包装小单位
					unitNum: '',//包装数量
					largeId: '',//包装大单位
					remark: '',//备注
				}
				arr.push(obj)
			})
			this.info.list = arr
		},
		// 重置表单
		resetForm(vaid, type) {
			// type 1 重置表单 2仅清空校验
			if (this.$refs[vaid] !== undefined) {
				this.$nextTick(() => {
					Promise.all([
						//数组部分的表单，用map返回验证函数的调用
						...this.info.list.map((item, index) => {
							var refs = `info${index}`
							let valiForm = this.$refs?.[refs].validate
								? this.$refs?.[refs]
								: this.$refs?.[refs][0];
							if (type === 1) {
								valiForm.resetFields()
							} else {
								valiForm.clearValidate()
							}
						})

					])
				})

			}
		},

		// 无多语言字段处理
		copyValue(key, key2, value) {
			this.info[key].map(i => {
				i[key2] = value
			})
		},
		getCheck(index) {
			var list = JSON.parse(JSON.stringify(this.info.list))
			list.splice(index, 1)
			var falg1 = []
			for (var i = 0; i < list.length; i++) {
				var item = list[i]
				// 表单校验
				var name = ''
				// if 多语言必填字段  // 多语言必填字段 + 非必填多语言字段
				if (item.name && item.alias) {
				} else if (item.name || item.alias || item.specs) {
					this.languageList.map(j => {
						if (j.id === item.langId) {
							name = j.name
						}
					})
					this.$message({
						showClose: true,
						message: name + ':' + this.$t('text.improveForms'),
						type: 'warning'
					})
					falg1.push(0)
					return false
				} else {
					falg1.push(1)
				}
			}
			var isallZeros = false
			// 判断是否包含0
			if (falg1.length > 0) {
				isallZeros = falg1.includes(0)
			}
			return !isallZeros
		},
		// 提交
		addSubmitForm() {
			var list = JSON.parse(JSON.stringify(this.info.list))
			var flag = false
			for (var i = 0; i < list.length; i++) {
				var item = list[i]
				var index = i
				// 当前语种 表单校验every
				if (this.tagId === item.langId) {
					let valiForm = this.$refs?.[`info${index}`].validate
						? this.$refs?.[`info${index}`]
						: this.$refs?.[`info${index}`][0];
					valiForm.validate((res) => {
						if (res) {
							// flag = true // 一个多语言字段 直接校验当前表单 
							flag = this.getCheck(index) //多个多语言 需要校验其他语种表单
						} else {
							return false
						}
					})
				}
			}
			if (flag) {
				// 全部表单验证通过
				var arr = JSON.parse(JSON.stringify(this.info.list))
				arr.map(i => {
					i.brandIds = i.brandIds.toString()
				})
				this.fullscreenLoading = true
				if (this.propUpType === 'add') {
					setAssMaterialSave({
						t: arr
					})
						.then(res => {
							if (res.code === 200) {
								this.$message({
									showClose: true,
									message: this.$t('text.addSucceedTip'),
									type: 'success'
								})
								this.fullscreenLoading = false
								this.getCancle()
							}
						})
						.catch(err => {
							this.fullscreenLoading = false
						})

				} else {
					setAssMaterialUpdate({
						t: arr
					})
						.then(res => {
							if (res.code === 200) {
								this.$message({
									showClose: true,
									message: this.$t('text.editSucceedTip'),
									type: 'success'
								})
								this.fullscreenLoading = false
								this.getCancle()
							}
						})
						.finally(() => {
							this.fullscreenLoading = false
						})
				}
			}
		},
		// 详情
		getInfo(id) {
			const loading = this.$loading({
				lock: true,
				text: this.$t('text.loading'),
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.7)'
			})
			getAssMaterialInfo(id).then(res => {
				if (res.code === 200) {
					var arr = res.data.t || []
					if (arr.length > 0) {
						this.setInfoData(arr)
						if (this.propUpType === 'detail') {
							this.updateList = arr[0].updateList || []
						}
					}
					loading.close()
				}
			}).catch(() => {
				loading.close()
			})
		},

		// 详情数据处理
		async setInfoData(data) {
			this.$nextTick(() => {
				var newArr = []
				var arr = data
				var obj = arr[0]
				if (this.propUpType !== 'detail') {
					this.languageList.map(i => {
						var obj_1 = {
							langId: i.id,
							id: obj.id,
							code: obj.remark, // 编号
							name: '', // 名称-多语言
							alias: '',// 别名-多语言
							classifyId: obj.classifyId, //分类
							brandIds: obj.brandIds ? obj.brandIds.split(',') : [],//品牌
							specs: '',//规格-多语言
							suggestPrice: obj.suggestPrice,//建议零售价
							retailPrice: obj.retailPrice,//零售价
							claimPrice: obj.claimPrice,//索赔价
							insurePrice: obj.insurePrice,//保险价
							wholesalePrice: obj.wholesalePrice,//批发价
							changeDays: obj.changeDays, //建议更换周期
							smallId: obj.smallId,//包装小单位
							unitNum: obj.unitNum,//包装数量
							largeId: obj.largeId,//包装大单位
							remark: obj.remark,//备注
						}
						newArr.push(obj_1)
					})
				} else {
					this.languageList.map(i => {
						var obj = {
							langId: i.id,
							id: '',
							code: '', // 编号
							name: '', // 名称-多语言
							alias: '',// 别名-多语言
							classifyId: '', //分类
							brandIds: [],//品牌
							specs: '',//规格-多语言
							suggestPrice: '',//建议零售价
							retailPrice: '',//零售价
							claimPrice: '',//索赔价
							insurePrice: '',//保险价
							wholesalePrice: '',//批发价
							changeDays: '', //建议更换周期
							smallId: '',//包装小单位
							unitNum: '',//包装数量
							largeId: '',//包装大单位
							remark: '',//备注
							status: 1 //
						}
						newArr.push(obj)
					})
				}
				arr.map(j => {
					// 品牌
					if (j.brandIds) {
						j.brandIds = j.brandIds.split(',').map(Number)
					} else {
						j.brandIds = []
					}
					// 根据id进行对象替换
					let index = newArr.findIndex(e =>
						e.langId == j.langId
					)
					if (index > -1) {
						// 替换对象
						newArr[index] = j
					}
				})
				this.info.list = newArr
			})
		},
		// 取消
		getCancle() {
			this.$store.state.tagsView.visitedViews.splice(
				this.$store.state.tagsView.visitedViews.findIndex(
					item => item.path === this.$route.path
				),
				1
			)
			this.$router.go(-1)
		}
	}
}
</script>
<style lang="scss" scoped>
.parts-manager-info {
	height: 100%;
	width: 100%;
	padding: 20px;
	box-sizing: border-box;
	overflow: hidden;

	&>.main_content {
		width: 99.9%;
		height: 100%;

		&>.main_content_title {
			margin-bottom: 10px;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}

		.main_content_con {
			height: calc(100% - 40px);
			width: 100%;
			display: inline-block;
			border: 1px solid #dfe6ec;
			padding: 20px;


			&>.el-form {
				width: 100%;
				height: calc(100% - 108px);
				margin-top: 20px;
				overflow: hidden;

				&>.el-form {
					width: 100%;
					height: 100%;
				}

				::v-deep .content_info {
					width: 100%;
					height: 100%;
					overflow: hidden;
					overflow-y: auto;

					.line {
						height: 1px;
						border: 1px solid #ebeef5;
					}

					.updateList {
						&>.title {
							margin-top: 22px;
							color: #606266;
							font-weight: bold;
							font-size: 15px;
						}

						.el-table .el-table__header-wrapper th {
							line-height: 40px;
							padding: unset;
							/* 修改表头字体颜色 */
							font-size: 14px;
							/* 修改表头字体大小 */
							background-color: #f2f2f2;
						}

					}

					.el-table {
						::v-deep th {
							line-height: 40px;
							padding: unset;
							background-color: #f2f2f2;
						}
					}
				}
			}

			.footerBtn {
				width: 100%;
				display: flex;
				justify-content: center;
				padding-top: 10px;
			}

			.el-button:hover,
			.el-button:focus {
				color: #000;
			}
		}
	}
}
</style>

